<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <input type="checkbox" id="ck" onclick="on();" />
    <hr />
    <div id="div">
        <input type="checkbox" class="cls" /><br />
        <input type="checkbox" class="cls" /><br />
        <input type="checkbox" class="cls" /><br />
        <input type="checkbox" class="cls" /><br />
        <input type="checkbox" class="cls" />
    </div>
</body>


<script type="text/javascript">

    // ​	1）给最上面的复选框绑定一个点击事件
    function on() {
        console.log("艹，我被点了")
        // document.getElementById("ck").onclick=function(){
        //     alert("艹，我被点了")
        // } 
        // ​	2）当一点击最上面的复选框的时候立刻获取下面所有的复选框
        let divarrs = document.getElementsByClassName("cls")

        // ​	3）遍历获取下面每个复选框

        for (let i = 0; i < divarrs.length; i++) {
            let el = divarrs[i]
        // ​	4）将最上面复选框此时checked的值赋值给下面每个复选框
        // 过去最上面复选框的checked值
            let fistchecked = document.getElementById("ck").checked
            el.checked = fistchecked
        }

    }


</script>

</html>